Sigo encontrándome con el error mencionado anteriormente a pesar de mis esfuerzos por solucionarlo. El terminal afirma que la aplicación se compila sin problemas, pero no aparece nada en el navegador. Encontré el error al mirar la consola. Aquí está el archivo index.js para el componente de encabezado al que se refiere el error:
import React from "react"; import { Route, Navigate, Router } from "react-router-dom"; import Navigation from "../../components/Navigation"; import About from "../../components/About"; import Portfolio from "../../components/Portfolio"; import Contact from '../../components/Contact'; import Resume from '../../components/Resume'; class Header extends React.Component { render() { return ( <Router> <header> <Navigation /> </header> <div className="content"> <Route exact path="/" render={() => <Navigate to="/about" replace={true}/>} /> <Route path="/about" component={About} /> <Route path="/portfolio" component={Portfolio} /> <Route path="/contact" component={Contact}/> <Route path="/resume" component={Resume}/> </div> </Router> ); } } export default Header;Aquí está la aplicación.js:
import React from 'react'; import Header from './components/Header'; import Footer from './components/Footer'; import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import { Routes } from 'react-router-dom'; function App() { return ( <div> <Routes> <Header /> <Footer /> </Routes> </div> ); } export default App;Puedo proporcionar más código si es necesario.
En la versión 6 react-router-dom , los componentes de ruta React.Fragment pueden tener Route o Routes como componente secundario, y los componentes de Route solo pueden tener Routes u otro componente de Route como principal. El Header no es un componente de Route y falla el invariante.
Mueva el Router a la aplicación y represente los componentes de Header y pie de Footer en su lugar, luego envuelva los componentes de Route en Routes .
aplicación
function App() { return ( <div> <Router> <Header /> <Footer /> </Router> </div> ); }Encabezamiento
Repare los componentes de la Route , ya no usan el component o el render para representar los componentes enrutados, en su lugar, ahora usan un accesorio de element para representar ReactElement s, es decir, JSX.
class Header extends React.Component { render() { return ( <div> <header> <Navigation /> </header> <div className="content"> <Routes> <Route path="/" element={<Navigate to="/about" replace />} /> <Route path="/about" element={<About />} /> <Route path="/portfolio" element={<Portfolio />} /> <Route path="/contact" element={<Contact />}/> <Route path="/resume" element={<Resume />}/> </Routes> </div> </div> ); } }Aunque puede tener más sentido mover las rutas a la aplicación como contenido entre el encabezado y el pie de página.
function App() { return ( <div> <Router> <Header /> <div className="content"> <Routes> <Route path="/" element={<Navigate to="/about" replace />} /> <Route path="/about" element={<About />} /> <Route path="/portfolio" element={<Portfolio />} /> <Route path="/contact" element={<Contact />}/> <Route path="/resume" element={<Resume />}/> </Routes> </div> <Footer /> </Router> </div> ); }